<template>
  <view class="xy-share">

    <!-- 二维码弹窗 -->
    <block>
      <view class="xy-modal-box xy-modal-box-center device-model-box br-10" :class="[showPoster&&posterImage?'xy-modal-show':'']">
        <view class="poster-img-box"><image class="poster-img" :src="posterImage" mode="widthFix"></image></view>
        <view class="flex p-b-30" v-show="posterImage">
          <button class="pbtn ts-24 tc-w " @tap="saveImage">保存二维码</button>
        </view>
      </view>
      <view class="xy-modal-mask" :class="[showPoster?'xy-mask-show':'']" @tap="showPoster = !showPoster"></view>
    </block>

    <!-- 分享按钮 -->
    <view class="xy-modal-box bottom-fixed xy-modal-box-bottom share-btn-model-box ovh" :style="'background-color: #f7f7f7;'" :class="[showShare?'xy-modal-show':'']" @tap="showShare = false">
      <view class="share-box bg-w">
        <view class="share-list-box flex p-t-50 p-b-30">
          <!-- #ifdef MP-WEIXIN -->
          <button class="share-btn" open-type="share">
            <image class="share-img" :src="$xyfun.image('/static/images/share_wx.png')" />
            <view class="share-title ts-28" :style="'color:#333333;'">微信好友</view>
          </button>
          <!-- #endif -->

          <button class="share-btn" @tap="onPoster">
            <image class="share-img" :src="$xyfun.image('/static/images/share_poster.png')" />
            <view class="share-title ts-28 lh-28 m-t-20" :style="'color:#333333;'">生成二维码</view>
          </button>
        </view>
        <view class="share-foot tc p-30 bl-t" @tap="showShare = false" :style="'color:#808080;'+'border-color:#f7f7f7;'">取消</view>
      </view>
    </view>
    <view class="xy-modal-mask" :class="[showShare?'xy-mask-show':'']" @tap="showShare =!showShare"></view>


  </view>
</template>
<script>


import { mapState } from 'vuex';
import $platform from '@/utils/platform';
import xyCanvas from '@/components/xy-canvas';
import xyfun from '../../utils/xyfun';
export default {
  name: 'xyShare',
  components: {
    xyCanvas
  },
  data() {
    return {

      shareConfig: {},
      showPoster: false,
      platform: $platform.get(),
      posterImage: '',
      canvasParams: {}
    };
  },
  props: {
    posterType: {
      type: String,
      default: ''
    },
    posterInfo: {
      type: Object,
      default: () => {
      }
    },
    value: {}
  },
  computed: {
    ...mapState(['user', 'common']),
    showShare: {
      get(val) {
        return val.value;
      },
      set(val) {
        this.$emit('input', val);
      }
    }
  },
  methods: {
    // 开始绘制
    onPoster() {
      let shareConfig = this.common.shareConfig;
      if (this.user.isLogin) {
        this.showPoster = true;
        this.posterImage = `${this.$xyfun.http_config('api_url')}/wechat/wxacode?spm=${shareConfig.spm}`;
      } else {
        this.$xyfun.toLogin();
      }
      this.showShare = false;
    },

    // 保存图片
    async saveImage() {
      var that = this;
      this.downloadFile(that.posterImage);
    },

    // 保存图片
    downloadFile(files) {
      var that = this;
      uni.downloadFile({
        url: this.$xyfun.image(files), //仅为示例，并非真实的资源
        success: (res) => {
          console.log(res)
          if (res.statusCode === 200) {
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success(res1) {
                that.$xyfun.msg('保存成功');
              }
            })
          }
        }
      });
    }
  }
};
</script>

<style lang="scss">
.poster-img-box {
  padding: 50rpx;

  .poster-img {
    width: 300rpx;
    height: 300rpx;
  }
}

.share-box {
  .share-btn {
    background: none;

    &::after {
      border: none;
      padding: 0;
    }

    padding: 0;

    .share-img {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
    }
  }
}

.pbtn {
  width: 220rpx;
  height: 60rpx;
  line-height: 60rpx;
  background: #07c060;
}

button {
  line-height: unset;
  height: unset;
}
</style>
